<template>
  <div>
    <!-- 面包屑导航-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>欢迎页</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 数据统计-->
    <el-row :gutter="10">
      <el-col :span="6">
        <div class="statistics" style="background: #409eff">
          <div class="title">
            <p>用户统计</p>
            <el-tag size="mini" type="success">实时</el-tag>
          </div>
          <div class="num">{{ totalUsers }}</div>
          <div class="tip">当前总用户数量</div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="statistics" style="background: #e6a23c">
          <div class="title">
            <p>问卷统计</p>
            <el-tag size="mini" type="info">实时</el-tag>
          </div>
          <div class="num">{{ totalQuestionnaires }}</div>
          <div class="tip">当前总问卷数量</div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="statistics" style="background: #67c23a">
          <div class="title">
            <p>题库统计</p>
            <el-tag size="mini" type="warning">实时</el-tag>
          </div>
          <div class="num">{{ totalQuestions }}</div>
          <div class="tip">当前总题目数量</div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="statistics" style="background: #909399">
          <div class="title">
            <p>群组统计</p>
            <el-tag size="mini" type="primary">实时</el-tag>
          </div>
          <div class="num">{{ totalGroups }}</div>
          <div class="tip">当前总群组数量</div>
        </div>
      </el-col>
    </el-row>

    <!-- Echarts图标-->
    <div class="echarts-container" style="margin-top: 50px">
      <el-card id="chart1"></el-card>
      <el-card id="chart2"></el-card>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  data () {
    return {
      totalUsers: 0,
      totalQuestionnaires: 0,
      totalQuestions: 55,
      totalGroups: 0,
      orderList: [],
    }
  },
  created () {
    this.getUserList()
    this.getNaireList()
    this.getGroupList()
    /*     this.initChart1()
        this.initChart2() */
    //this.getOrderList()
  },
  mounted () {
    this.initChart1()
    this.initChart2()
  },
  methods: {
    //返回最近七天的日期
    dateTime () {
      var myDate = new Date()
      myDate.setDate(myDate.getDate() - 5)
      var dateArray = []
      var dateTemp
      var flag = 1
      // 日期格式化
      for (let i = 0; i < 5; i++) {
        let month = 0
        // 月小于10，在前面加‘0’；因为月从0开始，故需+1
        if (myDate.getMonth() + 1 < 10) {
          month = '0' + (myDate.getMonth() + 1)
        } else {
          month = myDate.getMonth() + 1
        }
        let day = 0
        // 日小于10，在前加0
        if (myDate.getDate() < 10) {
          day = '0' + myDate.getDate()
        } else {
          day = myDate.getDate()
        }
        // YY-MM-DD
        dateTemp = myDate.getFullYear() + '-' + month + '-' + day
        dateArray.push(dateTemp)
        console.log(dateArray)
        //若不加flag则结果都是一个日期（当前日期减time天）
        //日期 +1 天，此日期为减time天后的日期
        myDate.setDate(myDate.getDate() + flag)
      }
      return dateArray
    },
    getUserList () {
      this.$http.get('user/list', {
        params: {
          auth: 3,
          used: 1,
          superId: this.Global.globalUser.globalID
        }
      }).then((response) => {
        this.totalUsers = response.data.data.length
      })
    },
    getNaireList () {
      this.$http.get('questionnaire/list').then((res) => {
        console.log(res)
        if (res.data.code === 200) {
          this.totalQuestionnaires = res.data.data.length
        } else if (res.data.code !== 200) {
          return this.$message.error('获取问卷数据失败')
        }
      })
    },

    getGroupList () {
      this.$http.get('groups/list', {
        params: {
          used: 1,
          userId: this.Global.globalUser.globalID
        }
      }).then((response) => {
        this.totalGroups = response.data.data.length
      })
    },
    getQuestionsList () {
      this.$http.get('questionBank/list', {
        params: {
          used: 1,
          userId: this.Global.globalUser.globalID
        }
      }).then((response) => {
        this.totalQuestions = response.data.data.length
      })
    },

    initChart1 () {
      // 创建echarts实例  获取要展示的区域
      const chart1 = echarts.init(document.getElementById('chart1'))
      let newTime = this.dateTime();
      const option = {
        xAxis: {
          type: 'category',
          data: newTime
        },
        yAxis: {
          type: 'value'
        },
        legend: {
          data: ['每日发布问卷数量', '每日收到答卷数量'],
          left: 'right'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer:{
            type:'line'
          }
        },
        series: [{
          name: '每日发布问卷数量',
          data: [7, 7, 9, 10, 10],
          type: 'line',
        }, {
          name: '每日收到答卷数量',
          data: [15, 22, 40, 11, 17],
          type: 'line'
        }]
      }
      chart1.setOption(option)
    },
    initChart2 () {
      const chart2 = echarts.init(document.getElementById('chart2'))

      // 订单状态
      const option = {
        title: {
          text: '问卷状态',
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {c} ({d}%)',
        },
        legend: {
          orient: 'vertical',
          left: 'right',
          data: ['已过期','未发布','进行中','已禁用'],
        },
        series: [
          {
            name: '问卷状态',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
              {
                value: 335,
                name: '未发布'
              },
              {
                value: 310,
                name: '进行中'
              },
              {
                value: 234,
                name: '已禁用'
              },
              {
                value: 135,
                name: '已过期'
              },
            ],
            // data: [],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      }

      // 对数据进行处理
      /* var data = [
      ]

      this.orderList.forEach(item => {
        if (item.pay_status === '1') {
          data[0].value++
        } else {
          data[1].value++
        }
      })
      for (var item of data) {
        option.legend.data.push(item.name)
        option.series[0].data.push(item)
      } */
      chart2.setOption(option)
    }
  },
}
</script>

<style lang="less" scoped>
.el-row {
  padding: 0 9px;

  .statistics {
    color: white;
    height: 100px;
    border-radius: 4px;
    padding: 0 8px;

    .title {
      display: flex; // 弹性布局
      justify-content: space-between; // 两边对齐
      align-items: center; // 垂直居中
    }

    p {
      font-size: 13px;
      font-weight: bold;
    }

    .num {
      font-size: 20px;
      font-weight: bold;
      text-align: center;
    }

    .tip {
      font-size: 12px;
    }
  }
}

.echarts-container {
  display: flex; // 同一行显示
  justify-content: space-between;
  margin-top: 10px;

  .el-card {
    height: 400px;
    width: 50%;
    margin: 0 8px; // 左右0 上下8
    padding: 20px; // 内边距
  }
}
</style>


<!--
<template>

  <div>
    &lt;!&ndash;XX问卷调查系统导航区域&ndash;&gt;
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据统计</el-breadcrumb-item>
      <el-breadcrumb-item>数据列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <div class="problem_list" style="margin-left:-1%;margin-top:-1%;display: flex;width:110%;height:100%;background-color: #2d2e4b">
        &lt;!&ndash;               <dv-loading>Loading...</dv-loading>&ndash;&gt;
        <div >
          <dv-decoration-7 style="margin-left:70px;margin-top:20px;width:200px;height:30px;color: #31a4c5;font-size: x-large">问卷使用次数</dv-decoration-7>
          <dv-capsule-chart :config="config_num" style="width:340px;height:320px;margin-top: 20px" />
          <dv-decoration-7 style="margin-left:70px;margin-top:20px;width:200px;height:30px;color: #31a4c5;font-size: x-large">题目类型统计</dv-decoration-7>
          <dv-active-ring-chart :config="config_type" style="text-color:burlywood;width:300px;height:300px;margin-left: 15px;margin-top: 15px" />
        </div>
        <div style="margin-left:30px;margin-top: 0px">
          <dv-border-box-11 style="width:102%;height:380px;" title="数据分析" >
            <div style="display: flex;margin-left: 15px">
              <div style="margin-top:50px;margin-left: 1%">
                <ve-line
                         :data="V_chartData"
                         :grid="grid"
                         height='300px'
                         :legend="legend"
                         :x-axis="xAxis"
                         :y-axis="yAxis"
                         :colors='colors'
                         width='450px'
                         :extend="V_extend"
                ></ve-line>
              </div>
              <dv-scroll-board :config="config_rank" style="margin-top:100px;width:480px;height:240px;margin-left:20px" />
            </div>
          </dv-border-box-11>
          <div>
            <div style="height: 70%;width: 105%;margin-left: -1%">
              <ve-histogram
                style="hieght:300px"
                :extend="B_Extend"
                :data="B_chartData"
                :settings="chartSettings"
                :tooltip="tooltip"
              ></ve-histogram>
            </div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
// 导入DateV依赖
import Vue from 'vue'
import DataV from '@jiaminghi/data-view'
import VeLine from 'v-charts/lib/line'
import VeHistogram from 'v-charts/lib/histogram.common'
Vue.component(VeHistogram.name, VeHistogram)
Vue.use(VeLine)
Vue.use(DataV)

export default {
  components: {
    VeLine,
    VeHistogram
  },
  data () {
    this.chartSettings = {
      labelMap: {
        BankReceiveAmount: '计划对比',
        ActualAmout: '进度',
        InvoiceAmount: '已超期'
      },
      yAxisName: ['百分比']

    }
    this.V_extend = {
      'grid.bottom': 0, // 图下边距
      'xAxis.0.axisLabel.color': '#eee', // 坐标轴文本 颜色
      'yAxis.0.axisLabel.color': '#eee', // 坐标轴文本 颜色
      'legend.textStyle.color': '#eee', // 样例文本 颜色
      'title.textStyle.color': '#79c5f5', // 标题文本 颜色
      'series.0.areaStyle.color': '#19d4ae3b', // 第一条线区域颜色
      'series.0.z': 99, // 第一条线显示的层级，越大越上层，不然会被其他线覆盖
      'series.0.markLine': { // 第一条线添加标记，当前时间标记
        silent: true,
        symbol: ['none', 'pin'], // 标记样式
        label: { formatter: '当前时间', distance: [0, 18] }, // 标记显示文本，位置
        data: [] // 标记数据   {xAxis: 42, other: xxx}   xAxis x轴坐标的位置第42个数据
      }
    }
    this.B_Extend = {
      'xAxis.0.axisLabel.color': '#ffffff',
      'yAxis.0.axisLabel.color': '#eee',
      title: { text: '详情', left: 'center', style: 'fontSize:0.4rem' },
      // 图例设置  显示哪个颜色分别表示什么
      legend: {
        formatter: function (name) { // 用来格式化图例文本，支持字符串模板和回调函数两种形式。模板变量为图例名称 {name}
          console.log(name, '图例名称')
          if (name === '计划时间' || name === '实际时间') {
            // const isShow = false
            return
          }
          // var isShow = true
          return name
        },
        show: true,
        bottom: 'bottom'
      },
      // 设置  计划时间和实际时间为 白色 #FFFFFF
      color: ['#E4E4E4', '#0d16b9', '#c43b19', '#e1bb6a', '#FFFFFF', '#FFFFFF'],
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow', // type:"cross"
          crossStyle: {
            color: '#0e0e0e'
          }
        }
      },
      // 每个柱子
      series (v) {
        console.log('每个柱子', v)
        // 颜色
        const colors = ['#f1d804', '#ea659c', '#2896e5', '#FF3300', '#FFFFFF', '#FFFFFF']
        // 设置柱子的样式
        v.forEach(i => {
          console.log('每个柱子里面的数据', i)
          i.barWidth = 20
          i.itemStyle = {
            color: colors[v.indexOf(i)],
            borderWidth: 0
          }
          if (i.name === '计划时间' || i.name === '实际时间') {
            i.barWidth = 0
          } else {
            i.barWidth = 15
            i.itemStyle = {
              color: colors[v.indexOf(i)],
              borderWidth: 0
            }
          }
        })
        return v
      }
    }
    // 提示框内容
    this.tooltip = {
      trigger: 'axis',
      position: function (point, params, dom, rect, size) {
        // 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
        // 提示框位置
        var x = 0 // x坐标位置
        var y = 0 // y坐标位置
        // 当前鼠标位置
        var pointX = point[0]
        var pointY = point[1]
        // 外层div大小
        // var viewWidth = size.viewSize[0];
        // var viewHeight = size.viewSize[1];
        // 提示框大小
        var boxWidth = size.contentSize[0]
        var boxHeight = size.contentSize[1]
        // boxWidth > pointX 说明鼠标左边放不下提示框
        if (boxWidth > pointX) {
          x = 5
        } else { // 左边放的下
          x = pointX - boxWidth
        }
        // boxHeight > pointY 说明鼠标上边放不下提示框
        if (boxHeight > pointY) {
          y = 5
        } else { // 上边放得下
          y = pointY - boxHeight
        }
        return [x, y]
      },
      formatter: function (params, ticket, callback) {
        console.log(params, ticket, 'params数据')
        let htmlStr = ''
        for (let i = 0; i < params.length; i++) {
          const param = params[i]
          const xName = param.name// x轴的名称
          const seriesName = param.seriesName// 图例名称
          const value = param.value// y轴值
          const color = param.color// 图例颜色
          if (i === 0) {
            htmlStr += xName + '<br/>'// x轴的名称
          }
          htmlStr += '<div>'
          // 文本颜色设置&#45;&#45;2020-07-23(需要设置,请解注释下面一行)
          // htmlStr += '<span style="color:'+color+'">';
          // 圆点后面显示的文本
          if (seriesName === '计划时间' || seriesName === '实际时间') {
            htmlStr += seriesName + '：' + value
          } else {
            // 为了保证和原来的效果一样，这里自己实现了一个点的效果
            htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' + color + ';"></span>'
            htmlStr += seriesName + '：' + value + '%'
          }
          // 文本颜色设置&#45;&#45;2020-07-23(需要设置,请解注释下面一行)
          // htmlStr += '</span>';
          htmlStr += '</div>'
        }
        return htmlStr
      }
    }
    return {
      B_chartData: {
        columns: ['阶段', '计划个数', '实际个数', '完成度'],
        // 自己定义的假数据
        rows: [
          { 阶段: '问卷创建数量', 计划个数: 12, 实际个数: 10, 完成度: 87 },
          { 阶段: '问卷查看人数', 计划个数: 120, 实际个数: 100, 完成度: 80 },
          { 阶段: '问卷提交人数', 计划个数: 120, 实际个数: 80, 完成度: 60 }
        ],
        color:'#333'
      },
      V_chartData: {
        columns: ['日期', '问卷发布数量', '问卷使用次数'],
        rows: [
          { 日期: '1/1', 问卷发布数量: 24, 问卷使用次数: 230 },
          { 日期: '1/2', 问卷发布数量: 50, 问卷使用次数: 120 },
          { 日期: '1/3', 问卷发布数量: 92, 问卷使用次数: 280 },
          { 日期: '1/4', 问卷发布数量: 65, 问卷使用次数: 150 },
          { 日期: '1/5', 问卷发布数量: 124, 问卷使用次数: 80 },
          { 日期: '1/6', 问卷发布数量: 98, 问卷使用次数: 260 }
        ],
        color: '#333'
      },

      config_num: {
        data: [
          {
            name: '问卷1',
            value: 562
          },
          {
            name: '问卷2',
            value: 469
          },
          {
            name: '问卷3',
            value: 87
          },
          {
            name: '问卷4',
            value: 152
          },
          {
            name: '问卷5',
            value: 420
          }
        ],

        colors: ['#e062ae', '#fb7293', '#e690d1', '#32c5e9', '#96bfff'],
        valueFormatter ({ value }) {
          console.warn(arguments)
          const reverseNumber = (value + '').split('').reverse()
          let valueStr = ''

          while (reverseNumber.length) {
            const seg = reverseNumber.splice(0, 3).join('')
            valueStr += seg
            if (seg.length === 3) valueStr += ','
          }

          return valueStr.split('').reverse().join('')
        },
        carousel: 'single'
      },
      config_type: {
        data: [
          {
            name: '单选题',
            value: 110
          },
          {
            name: '多选题',
            value: 35
          },
          {
            name: '判断题',
            value: 78
          },
          {
            name: '简答题',
            value: 50
          }
        ],
        digitalFlopStyle: {
          fontSize: 25,
          fill: '#31a4c5'
        },
        radius: '65%',
        activeRadius: '72%',
        color: ['#2a6f9a', '#79c5f5', '#93e079', '#f5e23e']
      },
      config_ware: {
        data: [
          {
            name: '周口',
            value: 55
          },
          {
            name: '南阳',
            value: 120
          },
          {
            name: '西峡',
            value: 71
          },
          {
            name: '驻马店',
            value: 66
          },
          {
            name: '新乡',
            value: 80
          },
          {
            name: '信阳',
            value: 35
          },
          {
            name: '漯河',
            value: 15
          }
        ],
        img: [
          '/img/conicalColumnChart/1st.png',
          '/img/conicalColumnChart/2st.png',
          '/img/conicalColumnChart/3st.png',
          '/img/conicalColumnChart/4st.png',
          '/img/conicalColumnChart/5st.png',
          '/img/conicalColumnChart/6st.png',
          '/img/conicalColumnChart/7st.png'
        ],
        textColor: 'rgba(26,27,28,0.74)',
        showValue: true
      },
      config_rank: {
        columnWidth: [120, 180, 180, 180],
        indexHeader: '综合排行',

        header: ['问卷名称', '问卷评分', '提交率'],
        data:
          [
            ['问卷1', '92', '96%'],
            ['问卷2', '90', '95%'],
            ['问卷3', '89', '85%'],
            ['问卷4', '90', '80%'],
            ['问卷5', '85', '60%'],
            ['问卷6', '70', '40%']
          ],
        index: true,
        align: ['center', 'center', 'center', 'center']
      }
    }
  },
  methods: {

    // 更新数据的示例方法
    updateHandler () {
      const { config } = this

      /**
       * 只是这样做是无效
       * config指向的内存地址没有发生变化
       * 组件无法侦知数据变化
       */
      this.config.header = ['列1', '列2', '列3']
      this.config.data = [
        ['行1列1', '行1列2', '行1列3'],
        ['行2列1', '行2列2', '行2列3'],
        ['行3列1', '行3列2', '行3列3'],
        ['行4列1', '行4列2', '行4列3'],
        ['行5列1', '行5列2', '行5列3'],
        ['行6列1', '行6列2', '行6列3'],
        ['行7列1', '行7列2', '行7列3'],
        ['行8列1', '行8列2', '行8列3'],
        ['行9列1', '行9列2', '行9列3']
      ],
        this.config.index = true,
        this.config.columnWidth = [50],
        this.config.align = ['center'],

        /**
         * 使用ES6拓展运算符生成新的props对象
         * 组件侦知数据变化 自动刷新状态
         */
        this.config = { ...this.config }
    }
  }
}

</script>

<style lang="less" scoped>

</style>
-->
